
<div class="ArticleDetailsWrap">
  <h2 class="textcenter"><{$article.title}></h2><a href="<{link ctl=article act=showList arg0=$cat.cat_id}>"><{$cat.cat_info}></a>
  <div class=" textcenter fontnormal fontcolorGray pubdate"><{t}>发布日期：<{/t}><{$article.uptime|userdate}></div>
  <hr  />

  <p><{$article.content}></p>
  <{if $goods}>
<div class="section" tab="相关商品">
	<h2 ><{t}>相关商品<{/t}></h2>
	<div class='num_left' style="width:12px;height:250px;margin-top:2px;border:1px solid #ccc;float:left;cursor:pointer;background:transparent url(statics/scollpicarrow.gif) no-repeat scroll 0 50%;"></div>
	<div class="num_right" style="width:12px;height:250px;margin-top:2px;border:1px solid #ccc;float:right;cursor:pointer;;background:transparent url(statics/scollpicarrow.gif) no-repeat scroll 0 50%;background-position:100% 50%;"></div>
<div class="body" id="goods-rels" style="overflow:hidden;height:260px;width:95%;">
   <div class="GoodsSearchWrap">
	<table class="grid" width="100%" cellspacing="0" cellpadding="0">
		<tr valign="top">
 	 <{foreach from=$goods item=item name=goods}>
   	 <td product="<{$item.goods_id}>" style="width:280px;">
		<div class="items-gallery">
            <dl class="goodinfo" style="overflow:hidden;zoom:1;">
                <dt class="goodpic">
                <a href="<{$item.goodspath}>" style='<{if $env.conf.site.thumbnail_pic_width !=0 && $env.conf.site.thumbnail_pic_width !=0}> width:<{$env.conf.site.thumbnail_pic_height}>px;height:<{$env.conf.site.thumbnail_pic_height}>px;<{/if}>;padding:0;margin:0 auto;'><img class="goods_pic" src="<{$item.thumbnail|default:$env.conf.site.default_thumbnail_pic|storager}>"/></a>
                </dt>
                <dd><h6 style="text-align:center;*height:24px;"><a href="<{$item.goodspath}>" title="<{$item.name}>"><{$item.name}></a></h6></dd>
                <dd style="width:48%; float:left"><span class="price1"><{$item.price|cur}></span></dd>
                <dd style="width:48%; float:right">
                    <ul class="button">
                    <{assign var="dddd" value="333"}>
                    <{goodsmenu product=$item setting=$setting login=$LOGIN zindex=$zindex--}>
                  </ul></dd>
            </dl>
		</div>
     </td>
  <{/foreach}>
	</tr>
	</table>
  </div>
	</div>
</div>
<{/if}>
<script>
var FxScroll=new Class({
	initialize:function(options){
		this.FxContain=options.FxContain;
		this.FxItems=options.FxItems;
		this.duration=options.duration||6000;
		this.showlength=options.showlength||4;
		this.step=options.step||1;
		if(!this.FxItems.length)return;
		this.ItemParent=this.FxItems[0].getParent();
		this.control=options.control;
		if(!this.control.length)return;
		this.init();
	},
	init:function(){
		if(this.FxItems.length<this.showlength)return;
		this.ItemSpace=this.FxItems[0].offsetWidth+this.FxItems[0].getStyle('marginLeft').toInt()
			     +this.FxItems[0].getStyle('marginRight').toInt();
		this.ItemParentW=this.ItemSpace*this.FxItems.length;
		this.ItemParent.setStyle('width',this.ItemParentW);
		this.controlEvent();
		this.start();
	},
	start:function(){
		this.timer=this.scroll.periodical(this.duration,this);
	},
	stop:function(){
		if(this.timer)$clear(this.timer);
	},
	scroll:function(){
		if(this.myFx)this.myFx.cancel();
		this.myFx=new Fx.Scroll(this.FxContain,{'link':'cancel','duration':4000});
		var space=this.FxContain.retrieve('space',0);
		var dur=this.FxContain.retrieve('dur','left');
		if(dur=='left'){space=space+this.ItemSpace*this.step;
		}else{space=space-this.ItemSpace*this.step;}
		if(this.ItemParentW-this.FxContain.offsetWidth-space<=this.ItemSpace/2&&dur!='right'){
			this.FxContain.store('dur','right');
		}else if(dur!='left'&&space<=0){
			this.FxContain.store('dur','left');
		}
		this.FxContain.store('space',space);
		this.myFx.start(space);
	},
	controlEvent:function(){
		var that=this;
		this.FxContain.getParent().addEvent('mouseover',function(e){that.stop();if(that.myFx)that.myFx.cancel();});
		this.FxContain.getParent().addEvent('mouseleave',function(e){that.scroll();that.start();});
		this.control[0].addEvent('click',function(e){
			that.stop();
			if(that.myFx)that.myFx.cancel();
			var space=that.FxContain.retrieve('space');
			if(space<=0){return;}
			that.FxContain.store('dur','right');
			that.scroll();
		});
		this.control[1].addEvent('click',function(e){
			that.stop();
			if(that.myFx)that.myFx.cancel();
			var space=that.FxContain.retrieve('space',0);
			if(space+that.FxContain.offsetWidth>that.ItemParentW){return;}
			that.FxContain.store('dur','left');
			that.scroll();
		});
	}
});

window.addEvent('domready', function(){
	var options={FxContain:$('goods-rels'),FxItems:$ES('.items-gallery','goods-rels'),control:$$('div[class^=num_]')};
	var vscroll=new FxScroll(options);
});
</script>
<script>
void function(){
/*橱窗放大镜
  author:litie[A]shopex.cn
  [c]  ShopEx
  last update : 2009年9月25日14:51:20
*/
    (new Image()).src = '<{$base_url}>statics/loading.gif';
    var getAmongPos = function(size,to){
                 var elpSize = $(to).getSize();
                 return {
                    'top':Math.abs((elpSize.y/2).toInt()-(size.height/2).toInt()+to.getPosition().y+elpSize.scroll.y),
                    'left':Math.abs((elpSize.x/2).toInt()-(size.width/2).toInt()+to.getPosition().x+elpSize.scroll.x)
                 };
            };

   $$('.grid .zoom a').addEvent('click',function(e){
            e.stop();
            if(this.retrieve('active'))return;
            var _this = this;
            _this.store('active',true);
            var tpic = this.getParent('.items-gallery').getElement('.goodpic img');
            var bpic_src = this.get('pic');
           
            var loading = new Element('div',{
                 styles:{'background':'#fff url(<{$base_url}>statics/loading.gif) no-repeat 50% 50%',
                         'width':40,
                         'height':40,
                         'border':'1px #e9e9e9 solid',
                         'opacity':.5}}).inject(document.body).amongTo(tpic);
            
            new Asset.image(bpic_src,{onload:function(img){
                  
                  loading.remove();
                  var winsize = window.getSize();
                  var imgSize = $(img).zoomImg(winsize.x,winsize.y,1);
                  var fxv = $extend(getAmongPos(imgSize,window),imgSize);
                  var imgFx = new Fx.Morph(img,{link:'cancel'});
                  img.setStyles($extend(tpic.getCis(),{opacity:0.5})).inject(document.body).addClass('img-zoom').addEvent('click',function(){
                      imgFx.start(tpic.getCis()).chain(function(){this.element.remove();_this.store('active',false);});
                  });
                  imgFx.start($extend(fxv,{opacity:1}));
                  document.addEvent('click',function(){
                       
                       img.fireEvent('click');
                       document.removeEvent('click',arguments.callee);
                  
                  });
            
            },onerror:function(){
                _this.store('active',false);
                loading.remove();
            }});
            
   
   });
   
   
   }();
</script>

</div>